
import React, { useEffect, useState } from 'react';
import type { MenuProps } from 'antd';
import { Card, Menu, message } from 'antd';
import SetRoomcard from './components/SetRoomcard';
import LadderCard from './components/LadderCard';
import ElevatorCard from './components/ElevatorCard';
import './index.less'

import { ConfigProvider } from 'antd';
import { AddlogCorridor, AddlogLadderControl, AddlogSetupCard } from './request';
type MenuItem = Required<MenuProps>['items'][number];
import { useIntl } from '@umijs/max';

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}




const index: React.FC = () => {

  const intl = useIntl();

  const items: MenuItem[] = [

    getItem(intl.formatMessage({id:"RoomSettings.Room Set card"}), '12'),
    getItem(intl.formatMessage({id:"RoomSettings.Ladder control Set card"}), '13'),
    getItem(intl.formatMessage({id:"RoomSettings.Channel Set cards"}), '14'),
  
  ];


  const [selectedMenu, setSelectedMenu] = React.useState<string | null>(null);

  const onClick: MenuProps['onClick'] = (e) => {

    setSelectedMenu(e.key);
  };
  const [sendMsg, setsendMsg] = useState<any>('') // 发送消息 
  const [CardMessage, setCardMessage] = useState() // 接受消息
  const [type, setType] = useState<string>('') // 成功后的提示消息 
  const [TKRoomID, setTKRoomID] = useState<any>({})
  const [TDRoomID, setTDRoomID] = useState<any>({})
  // const [_, sendMessage, lastMessage, isConnected] = useWebSocket({
  //   url: 'ws://127.0.0.1:9909',
  //   onOpen: () => {
  //     if (sendMsg) { sendMessage(sendMsg) }
  //   },
  //   onClose: () => {
  //     //连接关闭
  //     console.log('WebSocket disconnected');
  //   },
  //   onError: (event) => {
  //     //连接异常
  //     console.error('WebSocket error:', event);
  //   },
  //   onMessage: (onmsg) => {
  //     //收到消
  //     setCardMessage(JSON.parse(onmsg))
  //     // console.log(JSON.parse(onmsg))
  //   },
  // });
  // useEffect(() => {
  //   if (isConnected && sendMsg) {
  //     sendMessage(sendMsg);
  //   }
  // }, [sendMsg, isConnected]);


  const [GetRoomMsg, setGetRoomMsg] = useState<any>()
  const [getRoomID, setgetRoomID] = useState("")
  useEffect(() => {

    if (CardMessage) {
      if (CardMessage.result == 0) {
        console.log("TDRoomID", TDRoomID)
        message.success(type)
        if (getRoomID) {
          let data = {
            roomId: GetRoomMsg.roomId,
            roomNo: GetRoomMsg.roomNo,
            roomName: GetRoomMsg.roomName,
            cardNum: CardMessage.cardid,
            issuingTime: GetRoomMsg.setlocktime,
            cardType: GetRoomMsg.cardType,
            isTimeoutAlarm: GetRoomMsg.setoveropen,
            isFalseLockAlarm: GetRoomMsg.setfalselock,
            cmdInfo: JSON.stringify(sendMsg)
          }

          AddlogSetupCard(data)
        }

        if (TDRoomID) {
          if (type == `${TDRoomID.roomName}初发设置卡成功`) {
            AddlogCorridor({ ...TDRoomID, cmdInfo: JSON.stringify(sendMsg), cardType: "1", cardNum: CardMessage.cardid })
          }
          if (type == `${TDRoomID.roomName}更新设置卡成功`) {
            AddlogCorridor({ ...TDRoomID, cmdInfo: JSON.stringify(sendMsg), cardType: "2", cardNum: CardMessage.cardid })
          }
        }
        if (TKRoomID) {
          if (type == `${TKRoomID.bname}栋初发设置卡成功`) {
            AddlogLadderControl({ ...TKRoomID, cmdInfo: JSON.stringify(sendMsg), cardType: "1", cardNum: CardMessage.cardid })
          }
          if (type == `${TKRoomID.bname}栋更新设置卡成功`) {
            AddlogLadderControl({ ...TKRoomID, cmdInfo: JSON.stringify(sendMsg), cardType: "2", cardNum: CardMessage.cardid })
          }
        }

      } else {
        if (CardMessage.result == 1001) {
          message.success("发卡器链接成功")
        } else {
          if(CardMessage.uuid == "autoreadcardid") return 
          message.error(CardMessage.msg);
        }
      }
    }

  }, [CardMessage])
  const renderContent: () => void | "房卡" | "梯控卡" | "通道卡" | any = () => {
    if (selectedMenu === null) {
      return setSelectedMenu('12')
    }

    // 根据selectedMenu的值渲染对应的数据
    switch (selectedMenu) {

      case '12':
        return <SetRoomcard
          setsendMsg={setsendMsg}
          setType={setType}
          setGetRoomMsg={setGetRoomMsg}
          setgetRoomID={setgetRoomID}
          setCardMessage={setCardMessage}
        />;
      case '13':
        return <ElevatorCard setCardMessage={setCardMessage} setsendMsg={setsendMsg} setTKRoomID={setTKRoomID} setType={setType} />;
      case '14':
        return <LadderCard setCardMessage={setCardMessage} setsendMsg={setsendMsg} setType={setType} setTDRoomID={setTDRoomID} />;

      default:

        return 12;
    }
  }

  return (
    <>
      <Menu
        onClick={onClick}
        style={{ width: 170, float: "left", height: "840px", paddingTop: "7px" }}
        defaultSelectedKeys={['12']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        items={items}
      />
      <div className='menustyle' style={{
        height: "840px", // 容器的高度
        overflowY: "auto", // 当内容超出时允许垂直滚动

        msOverflowStyle: "none", // 隐藏滚动条（适用于IE和Edge浏览器）
        scrollbarWidth: "none", // 隐藏滚动条（适用于Firefox浏览器

        marginLeft: "175px",
        position: "absolute",
        borderRadius: "0",
        width: "85%"
      }}>
        {renderContent()}
      </div >
    </>
  )
}

export default index
